<template>
  <div>
    <app-header></app-header>

    <div class="mian">
      <div class="mianbox">
        <div class="noLogin" v-if="!getToken">
          <span>您还没有登录！登录后购物车的商品将保存到您账户中</span>
          <router-link to="/login">立即登录</router-link>
        </div>
        <div class="cart_content" id="cart" v-else>
          <div class="cart_header">
            <ul>
              <li class="input">
                <input
                  type="checkbox"
                  id="checkAll"
                  v-model="checkAll"
                  @click="cliAll"
                />
                <label for="checkAll">全选</label>
              </li>
              <li class="goods">商品</li>
              <li class="price">销售价</li>
              <li class="num">数量</li>
              <li class="td">优惠金额</li>
              <li class="td">积分</li>
              <li class="td">小计</li>
              <li class="del">操作</li>
            </ul>
          </div>

          <h2 v-show="!cart_list.length">
            你还没有添加商品,快去<router-link to="/">商城</router-link>选购吧
          </h2>
          <!-- 购物车内容 -->
          <div class="cart_list">
            <div
              class="item"
              v-if="cart_list.length"
              v-for="(item, index) in cart_list"
              :key="item.cid"
            >
              <div class="item_warp">
                <ul>
                  <li class="input">
                    <input type="checkbox" v-model="item.state" />
                  </li>
                  <li class="goods">
                    <router-link :to="'/wares/' + item.gid">
                      <div class="pic"><img :src="item.url" alt="" /></div>
                      <p class="name">{{ item.name }}</p>
                    </router-link>
                  </li>
                  <li class="price">{{ item.price | RMB }}</li>
                  <li class="num">
                    <div class="num_warp">
                      <button @click="jianNum(index)">-</button>
                      <input type="text" v-model="item.number" disabled />
                      <button @click="jiaNum(index)">+</button>
                    </div>
                  </li>
                  <li class="td">{{ item.discount }}</li>
                  <li class="td">{{ item.points }}</li>
                  <li class="td">{{ item.number * item.price }}</li>
                  <li class="del">
                    <a @click="del(item.cid)">X</a>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="order_discount" v-show="cart_list.length != 0">
            <h3><span>-</span>订单优惠</h3>
            <p><b>[包邮]</b>订单总金额满10元包邮</p>
          </div>

          <div class="stats">
            <router-link to="/">继续购物</router-link>
            <p>
              共<span class="allNum">{{ number }}</span
              >件商品，已选择<span>{{ isItem }}</span
              >件
            </p>
            <button @click="test">去结算</button>
            <div class="total_price">
              <span>合计</span>
              <b>{{ sum | RMB }}</b>
            </div>
          </div>
        </div>
      </div>
    </div>

    <app-foot></app-foot>
  </div>
</template>

<script>
import AppFoot from '../components/appFoot.vue'
import appHeader from '../components/appHeader.vue'
import { mapGetters, mapMutations } from 'vuex'
import { updateCart, delCart } from '../api/cart'
export default {
  components: { appHeader, AppFoot },
  data() {
    return {
      num: 0,
      cart_num: 0,
      checkAll: false,
      cart_list: []
    }
  },
  computed: {
    ...mapGetters(['getToken', 'getCart']),
    sum() {
      if (!this.cart_list) {
        return 0
      }
      return this.cart_list.reduce((pre, cur) => {
        if (cur.state == 1) return (pre += cur.number * cur.price)
        else return pre
      }, 0)
    },
    isItem() {
      if (!this.cart_list) {
        return 0
      }
      return this.cart_list.reduce((pre, cur) => {
        if (cur.state == 1) pre += cur.number
        return pre
      }, 0)
    },
    number() {
      if (!this.cart_list) {
        return 0
      }
      return this.cart_list.reduce((pre, cur) => {
        pre += cur.number
        return pre
      }, 0)
    }
  },
  watch: {
    cart_list: {
      deep: true,
      handler(val) {
        let cont = this.cart_list.filter((item) => item.state == 1).length
        this.checkAll = cont == this.cart_list.length
        this.setCart(val)
      }
    }
  },
  filters: {
    RMB(val) {
      return '￥' + val
    }
  },
  methods: {
    ...mapMutations(['setCart']),
    test() {
      this.$layer.msg('功能开发中,敬请期待')
    },
    cliAll() {
      if (this.cart_list.length) {
        this.cart_list.forEach((item) => (item.state = this.checkAll ? 0 : 1))
      }
    },
    jianNum(index) {
      if (this.cart_list[index].number > 1) {
        this.cart_list[index].number--
        updateCart(this.cart_list[index].cid, this.cart_list[index].number)
      }
    },
    jiaNum(index) {
      this.cart_list[index].number++
      updateCart(this.cart_list[index].cid, this.cart_list[index].number)
    },
    del(cid) {
      this.$layer.confirm('你确定要删除商品吗?', async (id) => {
        let index = this.cart_list.findIndex((item) => item.cid == cid)
        delCart(this.cart_list[index].cid)
        this.cart_list.splice(index, 1)
        this.$layer.close(id)
      })
    }
  },
  created() {
    this.cart_list = this.getCart
  }
}
</script>

<style lang="less" scoped>
.mian {
  padding-top: 20px;
  padding-bottom: 40px;
  width: 100%;
  background-color: #f2f2f2;

  .mianbox {
    width: 1226px;
    margin: 0 auto;

    .noLogin {
      padding: 0 12px;
      height: 38px;
      margin-bottom: 20px;
      background: #effaff;
      border: 1px solid rgba(0, 168, 255, 0.5);

      span {
        display: inline-block;
        vertical-align: middle;
        line-height: 38px;
        font-size: 14px;
        color: #00a8ff;
      }

      a {
        display: inline-block;
        vertical-align: middle;
        width: 76px;
        height: 28px;
        line-height: 28px;
        color: #fff;
        margin-left: 24px;
        font-size: 14px;
        text-align: center;
        background: #00a8ff;
        border-radius: 4px;
      }
    }

    .cart_content {
      margin-bottom: 30px;

      ul {
        overflow: hidden;
        zoom: 1;
        display: flex;
        align-items: center;

        li {
          float: left;
          font-size: 16px;
          width: 100px;
          height: 50px;
          text-align: center;
        }

        .input {
          width: 118px;
          text-align: left;

          input {
            background-color: initial;
            cursor: default;
            padding: initial;
            border: initial;
            box-sizing: border-box;
            margin: 3px 3px 3px 4px;
            vertical-align: middle;
          }

          label {
            margin-left: 15px;
          }
        }

        .goods {
          width: 490px;
          text-align: left;

          .pic {
            width: 100px;
            height: 100px;
            line-height: 100px;
            overflow: hidden;
            float: left;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .name {
            margin-left: 10px;
            line-height: 18px;
            margin-top: 20px;
            width: 375px;
            color: #555;
            float: left;
          }
        }

        .price {
          width: 110px;
        }

        .num {
          width: 96px;

          .num_warp {
            width: 91px;
            height: 23px;
            line-height: 23px;
            border: 1px solid #c9c9c9;
            font-size: 0;
            overflow: hidden;

            button {
              width: 23px;
              height: 23px;
              text-align: center;
              display: inline-block;
              background-color: #fff;
              color: #8b8b8b;
              border: none;
              cursor: pointer;
            }

            input {
              width: 45px;
              border: none;
              height: 23px;
              line-height: 23px;
              text-align: center;
              padding: 0;
              font-size: 12px;
              margin-top: -10px;
            }
          }
        }

        .del {
          width: 46px;

          a {
            width: 26px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            display: block;
            font-size: 16px;
            color: #555;
          }

          a:hover {
            background-color: aqua;
            border-radius: 50%;
          }
        }
      }

      .cart_header {
        height: 50px;
        line-height: 50px;
        padding-left: 16px;
        padding-right: 50px;
        background-color: #fff;
        margin-bottom: 10px;
      }

      .cart_list {
        overflow: hidden;

        .item {
          background-color: #fff;
          margin-bottom: 10px;
          padding-bottom: 30px;

          .item_warp {
            padding-left: 16px;
            padding-right: 50px;

            ul {
              padding-top: 20px;
            }

            li {
              font-size: 14px;
              height: auto;
            }
          }
        }
      }

      .order_discount {
        padding: 10px 0;
        background-color: #fff;
        margin-bottom: 10px;

        h3 {
          margin: 10px 0 10px 10px;
          line-height: 20px;
          font-size: 18px;
          font-weight: normal;

          span {
            display: inline-block;
            width: 20px;
            height: 20px;
            text-align: center;
            border-radius: 50%;
            border-color: #00a8ff;
            background-color: #00a8ff;
            color: #fff;
            vertical-align: top;
            margin-right: 10px;
          }
        }

        p {
          padding-left: 30px;
          height: 30px;
          line-height: 30px;
          color: #00a8ff;

          b {
            margin-right: 5px;
          }
        }
      }

      .stats {
        background-color: #fff;
        height: 70px;
        padding: 0 16px;

        a {
          float: left;
          font-size: 14px;
          color: #404040;
          text-decoration: none;
          line-height: 70px;
          margin-left: 20px;
        }

        p {
          float: left;
          margin-left: 30px;
          line-height: 70px;
          font-size: 14px;

          span {
            color: #00a8ff;
          }
        }

        button {
          background: #00a8ff;
          border-radius: 5px;
          float: right;
          margin-top: 13px;
          background: #00a8ff;
          display: block;
          padding: 0;
          width: 160px;
          height: 44px;
          border: none;
          border-radius: 5px;
        }

        .total_price {
          float: right;
          line-height: 70px;
          margin-right: 40px;

          span {
            color: #00a8ff;
            margin-right: 10px;
          }

          b {
            color: #f00;
            font-size: 30px;
            font-weight: normal;
          }
        }
      }

      h2 {
        height: 150px;
        background-color: #fff;
        font-size: 32px;
        text-align: center;
        line-height: 150px;
        margin-bottom: 20px;

        a {
          color: #00a8ff;
        }
      }
    }
  }
}
</style>
